<script setup>
import {getDictTypes} from "@/api/dict";
import {getActivityCheckRegistered, getActivityRegistered, getActivityForMe} from "@/api/activity";
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import QRCode from 'qrcode-generator';

const route = useRoute()

onMounted(() => {
  getDictTypesFun();
  getActivityCheckRegisteredFun();
  getActivityForMeFun();
})

// 判断是否已报名权限
const getActivityCheckRegisteredFun = () => {
  getActivityCheckRegistered({activityId: route.query.id}).then(res => {
    console.log(res)
    if (res.data) {
      active.value = 2;
    } else {
      active.value = 1;
    }
  })
}

// 判断报名结果
const getActivityForMeFun = () => {
  getActivityForMe(route.query.id).then(res => {
    console.log(res)
    if (res.data) {
      ticket.value = res.data;
      generateQRCode(res.data.qrCode, 'qrcode-canvas');
    }
  })
}

// 生成二维码到 Canvas
const generateQRCode = (text, elementId) => {
  const typeNumber = 0;            // 自动计算类型
  const errorCorrectionLevel = 'H';// 容错级别
  const qr = QRCode(typeNumber, errorCorrectionLevel);

  qr.addData(text);
  qr.make();

  // 生成 SVG 或 HTML 表格
  const svg = qr.createSvgTag({
    cellSize: 6,                   // 单元格大小
    margin: 4,                     // 边距
    color: '#000',                 // 二维码颜色
    background: '#fff'             // 背景颜色
  });
  // 插入到 DOM
  setTimeout(() => {
    document.getElementById(elementId).innerHTML = svg;
  }, 1000)
};


// 确认提交
const submit = () => {
  // 添加表单校验
  userRef.value.validate((valid) => {
    if (valid) {
      // 表单验证通过，继续提交
      getActivityRegistered(form.value).then(res => {
        console.log(res)
        if (res.suc) {
          active.value = 2;
          ElNotification({
            title: '报名成功',
            message: '请在活动开始前入场',
            type: 'success',
          })
          getActivityForMeFun();
        }
      }).catch(err => {
        console.log(err)
      })
    } else {
      // 表单验证失败
      return false;
    }
  });
}

const org_type = ref([]);
const business_category = ref([]);
const platform = ref([]);

const getDictTypesFun = async () => {
  getDictTypes({types: 'org_type'}).then(res => {
    org_type.value = res.data.org_type;
    console.log(org_type.value)
  })
  getDictTypes({types: 'business_category'}).then(res => {
    business_category.value = res.data.business_category;
    console.log(business_category.value)
  })
  getDictTypes({types: 'platform'}).then(res => {
    platform.value = res.data.platform;
    console.log(platform.value)
  })
}

// 标签项数据
const form = ref({
  "activityId": route.query.id,
  "name": "",
  "phone": "",
  "email": "",
  "company": "",
  "position": "",
  "city": "",
  "orgType": "",
  "businessCategory": [],
  "interestedPlatforms": [],
  "companionCount": null
})

// 票据数据
const ticket = ref({
  activityTitle: "",
  actualPaid: 0,
  address: "",
  company: "",
  endTime: "",
  id: null,
  name: "",
  phone: "",
  price: null,
  qrCode: "",
  startTime: "",
  status: "",
  ticketType: ""
})
const active = ref(0)

// 添加表单引用
const userRef = ref(null);

const rules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入电话号码', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  company: [
    { required: true, message: '请输入公司名', trigger: 'blur' }
  ],
  position: [
    { required: true, message: '请输入职位', trigger: 'blur' }
  ],
  city: [
    { required: true, message: '请输入所在城市', trigger: 'blur' }
  ],
  orgType: [
    { required: true, message: '请选择机构类型', trigger: 'change' }
  ],
  businessCategory: [
    { required: true, message: '请选择经营品类', trigger: 'change' }
  ],
  interestedPlatforms: [
    { required: true, message: '请选择感兴趣的平台', trigger: 'change' }
  ],
  companionCount: [
    { required: true, message: '请输入同行人数', trigger: 'blur' }
  ]
}

</script>

<template>
  <div class="sign-up-box">
    <el-steps class="el-steps-box" :active="active" simple finish-status="success">
      <el-step title="信息填写"/>
      <el-step title="报名成功"/>
    </el-steps>
    <template v-if="active === 1">
      <div class="ticket-form">
        <el-form :model="form" :rules="rules" ref="userRef" label-width="80px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名" maxlength="30"/>
          </el-form-item>
          <el-form-item label="电话号码" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入电话号码" maxlength="30"/>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="30"/>
          </el-form-item>
          <el-form-item label="公司名" prop="company">
            <el-input v-model="form.company" placeholder="请输入公司名" maxlength="30"/>
          </el-form-item>
          <el-form-item label="职位" prop="position">
            <el-input v-model="form.position" placeholder="请输入职位" maxlength="30"/>
          </el-form-item>
          <el-form-item label="所在城市" prop="city">
            <el-input v-model="form.city" placeholder="请输入所在城市" maxlength="30"/>
          </el-form-item>
          <el-form-item label="机构类型" prop="orgType">
            <div class="tag-box">
              <el-check-tag :checked="item.dictValue === form.orgType" v-for="item in org_type" :key="item.dictValue"
                            @click="form.orgType = item.dictValue">{{ item.dictLabel }}
              </el-check-tag>
            </div>
          </el-form-item>
          <el-form-item label="经营品类" prop="businessCategory">
            <div class="tag-box">
              <el-check-tag :checked="form.businessCategory.indexOf(item.dictValue)>-1" v-for="item in business_category"
                            :key="item.dictValue"
                            @click="form.businessCategory.indexOf(item.dictValue)>-1?form.businessCategory = form.businessCategory.filter(it => it !== item.dictValue):form.businessCategory.push(item.dictValue)">
                {{ item.dictLabel }}
              </el-check-tag>
            </div>
          </el-form-item>
          <el-form-item label="感兴趣的平台" prop="interestedPlatforms">
            <div class="tag-box">
              <el-check-tag :checked="form.interestedPlatforms.indexOf(item.dictValue)>-1" v-for="item in platform"
                            :key="item.dictValue"
                            @click="form.interestedPlatforms.indexOf(item.dictValue)>-1?form.interestedPlatforms = form.interestedPlatforms.filter(it => it !== item.dictValue):form.interestedPlatforms.push(item.dictValue)">
                {{ item.dictLabel }}
              </el-check-tag>
            </div>
          </el-form-item>

          <el-form-item label="同行人数" prop="companionCount">
            <el-input v-model="form.companionCount" placeholder="请输入同行人数" maxlength="30"/>
          </el-form-item>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input v-model="form.description" type="textarea" placeholder="请输入内容"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-button type="primary" style="margin-bottom: 20px" @click="submit">提交</el-button>
      </div>
      <div style="margin: 0 auto;width: 1280px;text-align: center">

      </div>

    </template>
    <template v-if="active === 2">
      <div class="ticket-content">
        <div class="ticket-box">
          <div class="ticket-box-title">我的电子票</div>
          <div class="ticket-info">
            <div class="ticket-title">{{ ticket.activityTitle }}</div>
            <div class="ticket-line">
              {{ ticket.startTime }} 至 {{ ticket.endTime }}
            </div>
            <div class="ticket-line">
              {{ ticket.address }}
            </div>
            <div class="ticket-qs-box">
              <div class=" ticket-left-circle"></div>
              <div class=" ticket-right-circle"></div>
              <div class="ticket-text">
                <span class="label">票种:  </span>
                <span class="value">{{ ticket.ticketType }}</span>
                <el-divider direction="vertical"/>
                <span class="label">实付:  </span>
                <span class="value">{{ ticket.actualPaid }}</span>
              </div>
              <div class="ticket-qs" id="qrcode-canvas"></div>
              <b class="ticket-qscode">{{ ticket.qrCode }}</b>
              <div class="ticket-text">
                <span class="label">姓名:  </span>
                <span class="value">{{ ticket.name }}</span>
              </div>
              <div class="ticket-text">
                <span class="label">电话号码:  </span>
                <span class="value">{{ ticket.phone }}</span>
              </div>
              <div class="ticket-text">
                <span class="label">公司名称:  </span>
                <span class="value">{{ ticket.company }}</span>
              </div>
            </div>

          </div>
        </div>
        <div class="ticket-tips" style="padding-bottom: 20px">
          <p>温馨提示:</p>
          <p>1. 请不要把电子票随意分享给他人，以免被盗用。</p>
          <p>2. 入场时,请提前打开电子票,调亮手机屏幕,扫描二维码检票入场,1人1票。</p>
        </div>
      </div>

    </template>

  </div>
</template>

<style scoped>
.el-steps-box{
  max-width: 600px;margin: 0 auto;margin-top: 10px;
  @media screen and (max-width: 991px) {
   width: calc(100% - 40px);
   margin-top: 10px;
  }
}
.sign-up-box {
  padding: 0 200px;
  background: #ffffff;
  width: 1000px;
  border-radius: 10px;
  margin: 20px auto;
  text-align: center;
  @media screen and (max-width: 991px) {
    width: calc(100% - 40px);
    padding: 0;
    padding-top: 10px;
  }
}

.ticket-form {
  margin: 0 auto;
  width: 600px;
  margin-top: 20px;
  text-align: center;
  @media screen and (max-width: 991px) {
    width: calc(100% - 40px);
    padding: 0;
    padding-top: 10px;
  }
}

.el-form {
  margin: 0 auto;
}
.ticket-content{
  margin: 0 auto;width: 600px;
  @media screen and (max-width: 991px) {
    width: calc(100% - 40px);
  }
}

.ticket-box {
  background: #0f47f1;
  border-radius: 10px;
  width: 400px;
  height: 600px;
  margin: 0 auto;
  margin-top: 10px;
  @media screen and (max-width: 991px) {
    width: calc(100% - 40px);
  }
}

.ticket-tips {
  margin: 0 auto;
  width: 400px;
  margin-top: 20px;
  font-size: 14px;
  color: #666;
  @media screen and (max-width: 991px) {
    width: calc(100% - 40px);
  } 
}

.ticket-box-title {
  color: #ffffff;
  font-size: 20px;
  padding: 10px 0;
  margin: 0 20px;
  border-bottom: 1px solid hsla(0, 0%, 100%, .3);
}

.ticket-info {
  padding: 20px;

  .ticket-title {
    color: #d4fb00;
    line-height: 24px;
  }

  .ticket-line {
    color: #ffffff;
    line-height: 24px;
    margin: 5px 0;
  }
}

.ticket-qs-box {
  border-radius: 10px;
  background: #ffffff;
  padding: 20px;
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
  position: relative;
}

.ticket-left-circle {
  background-color: #0f47f1;
  border-radius: 50%;
  height: 30px;
  position: absolute;
  top: 300px;
  width: 30px;
  left: -16px;
}

.ticket-right-circle {
  background-color: #0f47f1;
  border-radius: 50%;
  height: 30px;
  position: absolute;
  top: 300px;
  width: 30px;
  right: -16px;
}

.ticket-qs {
  margin: 0 auto;
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ticket-qscode {
  color: #000000;
  font-size: 18px;
}

.ticket-text {
  display: flex;
  margin: 5px 0;
  font-size: 16px;
  align-items: center;

  .label {
    color: #aaaaaa;
  }

  .value {
    color: #333333;
  }
}

.tag-box {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}


</style>